<template>
  <div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-800">任务类型分布</h3>
      <div class="text-sm text-gray-500">
        <a-radio-group v-model="typeRange"
                       size="small"
                       @change="handleChange">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="running">运行中</a-radio-button>
        </a-radio-group>
      </div>
    </div>

    <div ref="chartRef"
         class="h-64 rounded-lg bg-white shadow-md overflow-hidden"></div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

// 接收父组件传递的初始类型范围
const props = defineProps({
  taskTypeRange: { type: String, default: 'all' },
});

const emits = defineEmits(['typeRangeChange']);
const typeRange = ref(props.taskTypeRange);
const chartRef = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 模拟任务类型数据（可从接口获取）
const getChartData = (type: string) => {
  switch (type) {
    case 'all':
      return {
        title: '全部任务类型分布',
        xAxis: ['地震监测', '地质勘探', '气候模拟', '数据处理', '其他'],
        series: [{ name: '任务数', data: [32, 45, 28, 50, 18] }],
        colors: ['#1890FF', '#2FC25B', '#FAAD14', '#722ED1', '#13C2C2'],
      };
    case 'running':
      return {
        title: '运行中任务类型分布',
        xAxis: ['气候模拟', '数据处理'],
        series: [{ name: '任务数', data: [28, 40] }],
        colors: ['#1890FF', '#722ED1'],
      };
    default:
      return { xAxis: [], series: [] };
  }
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  myChart = echarts.init(chartRef.value);
  updateChart();
  window.addEventListener('resize', () => myChart?.resize());
};

// 更新图表数据
const updateChart = () => {
  if (!myChart) return;
  const data = getChartData(typeRange.value);

  const option: echarts.EChartsOption = {
    title: {
      text: data.title,
      left: 'center',
      top: '5%',
      textStyle: { color: '#333', fontSize: 14 },
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => `${params[0].name}<br/>任务数: ${params[0].value}`,
    },
    legend: {
      top: '15%',
      left: 'center',
      textStyle: { color: '#666' },
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
        color: '#999',
        fontSize: 12,
        interval: 0, // 强制显示所有标签
        rotate: 45, // 防止标签重叠
      },
    },
    yAxis: {
      type: 'value',
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: { color: '#f0f0f0', type: 'dashed' },
      },
      axisLabel: {
        color: '#999',
        fontSize: 12,
        formatter: (value) => `${value}项`,
      },
    },
    series: data.series.map((s, index) => ({
      ...s,
      type: 'bar',
      barWidth: '35%',
      itemStyle: { color: data.colors[index] },
      label: {
        show: true,
        position: 'top',
        color: '#333',
        fontSize: 12,
      },
    })),
  };

  myChart.setOption(option);
};

// 生命周期钩子
onMounted(() => {
  initChart();
});

// 监听类型范围变化
watch(typeRange, () => {
  emits('typeRangeChange', typeRange.value);
  updateChart();
});
</script>

<style scoped>
/* 图表容器样式 */
[ref^='chartRef'] {
  width: 100%;
  height: 100%;
  background-color: #f9fafb;
}
</style>